<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>

    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入自定义样式 -->
    <style>
        #app {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 250px;
        }
        .content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .chart {
            flex-grow: 1;
        }
        .header, .footer {
            height: 50px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 侧边栏导航 -->
    <div class="sidebar bg-light">
        <el-menu :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title"><el-icon><i class="el-icon-menu"></i></el-icon>导航菜单</template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">首页</el-menu-item>
                    <el-menu-item index="1-2">统计信息</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>

    <!-- 主内容区域 -->
    <div class="content">
        <!-- 顶部栏 -->
        <div class="header">
            <div>
                <el-avatar :size="30" :src="avatarUrl"></el-avatar>
                <span style="margin-left: 10px;">{{ adminName }}</span>
            </div>
            <div>
                <el-dropdown>
                        <span class="el-dropdown-link">
                            更换主题<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="theme in themes" :key="theme" @click.native="changeTheme(theme)">
                            {{ theme }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button @click="toggleFullScreen">全屏</el-button>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="chart">
            <!-- ECharts 图表 -->
            <div id="chart-container" style="height: 100%;"></div>
        </div>

        <!-- 底部栏 -->
        <div class="footer">
            <span>最近公告：{{ latestAnnouncement }}</span>
        </div>
    </div>
</div>

<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<!-- 自定义脚本 -->
<script>
    new Vue({
        el: '#app',
        data: {
            avatarUrl: 'https://via.placeholder.com/30',
            adminName: '管理员',
            themes: ['主题1', '主题2', '主题3', '主题4', '主题5'],
            latestAnnouncement: '欢迎使用后台管理系统！'
        },
        mounted() {
            this.initECharts();
        },
        methods: {
            changeTheme(theme) {
                alert('更换主题：' + theme);
                // 这里可以实现更换主题的逻辑
            },
            toggleFullScreen() {
                let elem = document.documentElement;
                if (!document.fullscreenElement) {
                    elem.requestFullscreen().catch(err => {
                        alert(`Error enabling fullscreen mode: ${err.message}`);
                    });
                } else {
                    document.exitFullscreen();
                }
            },
            initECharts() {
                var chartDom = document.getElementById('chart-container');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '用户注册统计图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['用户数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '用户数',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    });
</script>
</body>
</html>
